<template>
	<view style="width: 100%;padding: 30upx;">
		<view style="display: flex;justify-content: space-around;">
			<view class="title" :class="sel==1?'active':''"  @click="tabNavs(1)">我的咨询</view>
			<view class="title" :class="sel==2?'active':''" @click="tabNavs(2)">我的预约</view>
		</view>
		<view>
			<empty v-if="detailList.length === 0"></empty>
			<view style="display: flex;border-bottom: 2upx solid #dddddd;padding: 30upx;" v-for="(item, index) in detailList" :key="index">
				<!-- <image src="../../static/user-bg.jpg" style="border-radius: 10upx;width: 176upx;height: 176upx;" mode="scaleToFill"></image> -->
				<view style="margin-left: 26upx;;">
					<view style="margin-top: 4upx;font-size: 30upx;font-family: PingFang SC, PingFang SC-Medium;font-weight: 500;color: #333333;">{{item.con}}</view>
					<view style="margin-top: 22upx;font-size: 24upx;font-family: PingFang SC, PingFang SC-Medium;font-weight: 500;color: #a9a9a9;">{{item.cat_type}}</view>
					<view style="margin-top: 40upx;font-size: 20upx;font-family: PingFang SC, PingFang SC-Medium;font-weight: 500;text-align: left;color: #088fff;">预约咨询日期：{{item.time}}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import empty from "@/components/empt2";
	export default{
		data(){
			return{
				sel: 1,
				detailList:[]
			}
		},
		components: {
			empty
		},
		
		created() {
			this.getZxzxRecords()
			// this.getYyzxRecords()
		},
		
		methods:{
			tabNavs:function(sel){
				this.sel = sel
				if(sel == 1){
					this.getZxzxRecords()
				}else{
					this.getYyzxRecords()
				}
			},
			
			getZxzxRecords:function(){
				var that = this;
				that.$zdapi.getZxzxRecords({
					uid: wx.getStorageSync('uid')
				}).then( res => {
					if(res.status == 1){
						that.detailList = res.data
					}else{
						that.detailList = []
					}
				})
			},
			
			getYyzxRecords:function(sel){
				var that = this;
				that.$zdapi.getYyzxRecords({
					uid: wx.getStorageSync('uid')
				}).then( res => {
					if(res.status == 1){
						that.detailList = res.data
					}else{
						that.detailList = []
					}
				})
			}
		}
	}
</script>

<style>
	*{
		box-sizing: border-box;
	}
	page{
		height: 100%;
	}
	.perItem{
		width: 100%;
		height: 150upx;
		border-radius: 15upx;
		background: #ffffff;
		display: flex;
		align-items: center;
	}
	
	.title{
		font-size: 26upx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: center;
		color: #999999;
	}
	.active{
		font-size: 34upx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #000000;
		position: relative;
	}
	.active::after{
		content: ' ';
		width: 58rpx;
		height: 8rpx;
		background: #088FFF;
		display: inline-block;
		position: absolute;
		left: 40upx;
		bottom: -16upx;
	}
</style>
